<template>
  <!--报名页面 -->

  <div>
    <div class="tite">报名表</div>
    <el-card class="card" style="width:500px;margin: 0 auto">
    <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="100px" class="demo-ruleForm">
      <!--     姓名-->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <!--      性别-->
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <!--年龄-->
      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>

      <el-form-item label="身份证" prop="identity">
        <el-input v-model="ruleForm.identity"></el-input>
      </el-form-item>

      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>


      <!--     学驾车型-->
      <el-form-item label="学驾车型" prop="model">
        <el-select v-model="ruleForm.model" placeholder="请选择学驾车型">
          <el-option label="C1(小型汽车)" value="C1"></el-option>
          <el-option label="C2(小型自动档汽车)" value="C2"></el-option>
          <el-option label="C3(低速载货汽车)" value="C3"></el-option>
          <el-option label="A1(大型客车)" value="A1"></el-option>
          <el-option label="A2(牵引车)" value="A2"></el-option>
          <el-option label="A3(城市公交车)" value="A3"></el-option>
          <el-option label="B1(中型客车)" value="B1"></el-option>
          <el-option label="B2(大型货车)" value="B2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交报名</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>

</template>

<script>
export default {
  name: "enroll",
  data() {
    return {
      ruleForm: {
        name: '',
        sex: '',
        age: '',
        identity: '',
        phone: '',
        address: '',
        model: '',
        email: '',
        work: '',
        questions: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          // {min: 18, max: 60, message: '年龄要在18到60岁之间才可报名！！！', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value < 18 || value >60) {
                callback(new Error('未满18岁'))
              }else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        identity: [
          {required: true, message: '请输入身份证号', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入电话', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入住址', trigger: 'blur'}
        ],
        model: [
          {required: true, message: '请选择学驾车型', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
        work: [
          {required: true, message: '请输入工作单位', trigger: 'blur'}
        ]


      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formName.validate((valid) => {
        if (valid) {
         this.$axios.post('/api/up/create',this.ruleForm).then(res =>{
           console.log(res);
           if (res.data.data.status === 1){
             this.$message.success("报名成功")
           }else {
             this.$message.error("报名失败")
           }
         })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.tite{

font-size: 2em;
  background-color: #08c46d;
  height: 50px;
  width: 500px;
  margin: 0 auto;
  line-height: 50px;
  color: white;
}
</style>